<template>
	<el-menu style="height: 100%; overflow-x: hidden;" background-color="rgb(26, 59, 50)" :default-openeds='openeds'
		text-color="#FFF" active-text-color="#1ba784" :collapse-transition="false" :collapse="isCollapse" router>
		<div style="height: 60px; line-height: 60px; text-align: center;">
			<img src="../assets/transac.png" alt=""
				style="width: 20px; position: relative; top: 3px; margin-right: 3px;" />
			<b style="color: #fff;" v-show="logoShow">二手交易管理系统</b>
		</div>

		<fragment v-for="item in menus" :key="item.id">
			<el-menu-item :index="item.path" style="width: 200px;" v-if="item.path">
				<i :class="item.icon"></i>
				<span slot="title">{{ item.name }}</span>
			</el-menu-item>
			<el-submenu :index="item.id" v-else>
				<template slot="title">
					<i :class="item.icon"></i>
					<span slot="title">{{item.name}}</span>
				</template>
				<fragment v-for="it in item.children" :key="it.id">
					<el-menu-item :index="it.path" style="width: 200px;">
						<i :class="it.icon"></i>
						<span slot="title">{{ it.name }}</span>
					</el-menu-item>
				</fragment>
			</el-submenu>
		</fragment>
	</el-menu>
</template>

<script>
	export default {
		name: "Aside",
		props: {
			isCollapse: Boolean,
			logoShow: Boolean,
			menus: Array
		},
		methods: {

		},
		data() {
			return {
				openeds: this.menus.map(v => v.id)
			}
		}
	}
</script>

<style>
</style>
